<template>
  <div>
    <a-modal
      v-model="visible"
      title="输入名称"
      ok-text="确认"
      cancel-text="取消"
      @ok="onSave"
    >
      <a-input v-model="dlgName"></a-input>
    </a-modal>
    <a-select v-model="currName" style="width: 200px" @change="onSelTemplate">
      <a-select-option
        v-for="item in PickTemplates"
        :key="item.s_name"
        :value="item.s_name"
        >{{ item.s_name }}</a-select-option
      >
    </a-select>
    <a-space>
      <a-button @click="onSave">保存</a-button>
      <a-button @click="onDel">删除</a-button>
      <a-button @click="refresh">刷新</a-button>
    </a-space>
    <div style="margin-top: 5px">
      有效属性<br />
      <a-checkbox-group
        v-model="ps"
        style="width: 500px"
        :options="plist"
      ></a-checkbox-group>
      <div style="margin-top: 5px">
        有效告警<br />
        <a-checkbox-group
          v-model="as"
          :options="alist"
          style="width: 500px"
        ></a-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
import { get, update } from "@/services/crud";
export default {
  data() {
    return {
      ps: [],
      as: [],
      model: {},
      PickTemplates: [],
      currName: "",
      visible: false,
      dlgName: "",
    };
  },
  created() {
    this.refresh();
  },
  methods: {
    onSelTemplate(e) {
      console.log("----------", e);
      let p = this.PickTemplates.find(p=>{
        return p.s_name == e
      })
      if(p){
        let picks = p?.pick_disabled?.split(",")
        if(picks){
          this.ps = this.plist.filter(inp=>{
            let item = picks.find((pick)=>{
              return pick === inp.value
            })
            if(item){
              return false
            }
            return true
          }).map(x=>{
            return x.value
          })
            
        }
        let alarms = p?.alarm_disabled?.split(",")
        if(alarms){
          this.as = this.alist.filter(inp=>{
            let item = alarms.find((pick)=>{
              return pick === inp.value
            })
            if(item){
              return false
            }
            return true
          }).map(x=>{
            return x.value
          })
            
        }
      }
    },
    onSave() {
      if (this.currName == "" && !this.visible) {
        this.visible = true;
      } else {
        if(this.visible){
          this.currName = this.dlgName
        }
        this.save(this.currName);
      }
    },
    save(name) {
      let pt = {
        s_name: name ? name : this.currName,
        pick_disabled: this.plist
          .filter((p) => {
            let item = this.ps.find((s) => {
              return s === p.value;
            });
            if (item === undefined) {
              return true;
            }
            return false;
          })
          ?.map((x) => {
            return x.value;
          })
          .join(","),
        alarm_disabled: this.alist
          .filter((p) => {
            let item = this.as.find((s) => {
              return s === p.value;
            });
            if (item === undefined) {
              return true;
            }
            return false;
          })
          ?.map((x) => {
            return x.value;
          })
          ?.join(","),
      };

      update("/pickTemplate", pt).then(() => {
        this.visible = false;
      });
      console.log("*************", pt);
    },
    onDel() {},
    refresh() {
      this.$store
        .dispatch("tmodel/refreshTModelByID", "m_smartBoxForPolice")
        .then((m) => {
          if (m && m.body && typeof m.body == "string") {
            this.model = JSON.parse(m.body);
          } else {
            this.model = m?.body;
          }
        });

      get("pickTemplate", "all").then((res) => {
        this.PickTemplates = res?.data?.result;
        if (
          this.PickTemplates == undefined ||
          !Array.isArray(this.PickTemplates)
        ) {
          this.PickTemplates = [];
        }
      });
    },
  },
  computed: {
    plist() {
      let list = this.model?.properties
        ?.filter((x) => {
          if (x.name == "摄像头设备通信故障" || x.identifier == "IO status") {
            return false;
          }
          return true;
        })
        .map((x) => {
          return { label: x.name, value: x.identifier };
        });
      list.push({label:"照明灯",value:'zmd'},{label:"告警灯",value:'gjd'},{
        label:"频闪灯",value:'psd'},{label:'蜂鸣器',value:'fmq'},{label:'雷击',value:'lj'},
        {label:'加热器',value:'jrq'},{label:'电流',value:'dl'},{label:'漏电流',value:'ldl'},
        {label:'烟雾',value:'yw'},{label:'电子锁',value:'dzs'},
        {label:'开门球机聚焦',value:'kmjj'})
      return list
    },
    alist() {
      return this.model?.events?.map((x) => {
        return { label: x.name, value: x.identifier };
      });
      //return [];
    },
  },
};
</script>
